<template>
  <div class="department-container">
    <div class="app-container">
      <div class="company">
        <!-- 左侧: 组织架构 - 部门名 -->
        <div class="c-left">{{ companyInfo.name }}</div>
        <div class="c-right">
          <div class="cr-left">负责人</div>

          <!-- 右侧: 下拉菜单 - "操作"功能下拉菜单 -->
          <div class="cr-right">
            <el-dropdown>
              <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 树形结构 -->
      <div class="tree">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
          <!-- 组织架构 -->
          <!-- 作用域插槽的 aaa 是组建 el-tree 给我们往外暴露的 一个属性, 是一个对象, 里面有 node 属性和 data 属性 -->
          <!-- <div slot-scope="aaa" class="company"> -->
          <div slot-scope="{ data: myData }" class="company">
            <!-- 左侧: 组织架构 - 部门名 -->
            <div class="c-left">{{ myData.name }}</div>
            <div class="c-right">
              <div class="cr-left">{{ myData.manager }}</div>

              <!-- 右侧: 下拉菜单 - "操作"功能下拉菜单 -->
              <div class="cr-right">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <!-- 将 myData 作为参数传给添加事件处理函数 -->
                    <!-- mydata数据, 是我们的作用域插槽的数据, 里面有当前 tree  -->
                    <el-dropdown-item @click.native="addDepartment(myData)">添加子部门</el-dropdown-item>
                    <el-dropdown-item @click.native="editDepartment(myData)">编辑部门</el-dropdown-item>
                    <el-dropdown-item v-if="!myData.children || myData.children.length === 0" @click.native="delDepartment(myData)">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>

        </el-tree>
      </div>

    </div>

    <!-- 弹框: 弹出提示框 -->
    <el-dialog
      v-if="dialogVisible"
      :title="isEdit ? '编辑部门' : '添加部门'"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <!-- 引入我们自己封装的组件: 并接收子组件传递的事件, 进行关闭窗口的操作 -->
      <!--
        父传子:
        isEdit: 是否为编辑 将状态传给子组件
        currentPid: 组件获取数据的 id 传给子组件
       -->
      <update-dialog
        :is-edit="isEdit"
        :current-pid="currentPid"
        :arr-list-to-child="arrListToChild"
        @MyCloseEvent="dialogVisible = false"
        @success="handleSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
import { deleteDepartmentRequest, getDepartmentInfoRequest } from '@/api/department'
import { transformListToTree2 } from '@/utils'
import UpdateDialog from './UpdateDialog.vue'
import { Message } from 'element-ui'
export default {
  components: { UpdateDialog },
  data() {
    return {
      // 部门组织架构:
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      companyInfo: {},
      // 控制弹窗是否关闭
      dialogVisible: false,
      // 用来父传子
      // 将 myData 数据中的 pid 赋给变量 currentPid 作为请求参数发送给服务区
      currentPid: '',
      // 代表 是否为编辑
      isEdit: false,
      // 获取父组件里面所有的平铺数据, 传递给子组件使用
      arrListToChild: []
    }
  },
  created() {
    this.getDepartmentInfo()
  },
  methods: {
    // ^ ========== 调用函数发送请求 ==========
    // 获取公司组织信息接口
    async getDepartmentInfo() {
      try {
        const res = await getDepartmentInfoRequest()
        // console.log(res.data.depts)
        // 将获取到的公司组织信息, 通过 map 方法
        // 提取数据中的 id, pid, 部门名称, 部门编码, 赋值给新数组对象 arrListToChild
        // 并通过父传子, 传递给子组件
        // * 用来判断用户输入的 数据是否与服务器存在的数据 是否重复
        this.arrListToChild = res.data.depts.map(item => {
          return {
            id: item.id,
            pid: item.pid,
            name: item.name,
            code: item.code
          }
        })

        this.companyInfo = res.data.depts.shift()
        // 将请求到的数据, 赋值给 data数据
        // this.data = res.data.depts
        // this.data = transformListToTree(res.data.depts)
        this.data = transformListToTree2(res.data.depts, '')
        // console.log(this.companyInfo.manager)
      } catch (err) {
        console.log('获取公司组织信息接口失败', err)
      }
    },
    // ^ ========== 事件处理函数 ==========
    // 组织架构菜单点击事件
    handleNodeClick(data) {
      // console.log(data)
    },
    // 添加组织点击事件
    addDepartment(value) {
      // 当我们点击子菜单的添加部门的时候, 让模态框显示
      this.dialogVisible = true
      this.isEdit = false
      // 这里 value 获取到的是 element 组件获取的数据 myData, 里面有 pid
      // 将 pid 赋值给变量 currentId , 并传递给子组件, 用来发送 post 请求时作为请求参数发送给服务器
      // console.log(value)
      this.currentPid = value.id
    },
    // 编辑组织点击事件
    editDepartment(value) {
      this.dialogVisible = true // 显示弹框
      this.isEdit = true
      // 点击编辑时, 将myData的pid赋给currentPid, 传给弹窗组件, 用于编辑功能数据回显示
      this.currentPid = value.id
    },
    // 删除部门点击事件
    async delDepartment(value) {
      await deleteDepartmentRequest(value.id)
      Message.success('删除部门成功')
      this.getDepartmentInfo() // 调用函数重新渲染页面
    },
    // 当 添加/修改 成功时, 接收子组件传递的自定义事件, 关闭模态框, 调用函数重新渲染页面
    handleSuccess() {
      this.dialogVisible = false
      this.getDepartmentInfo() // 重新渲染页面
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .company {
    display: flex;
    width: 100%;
    // 左侧: 组织架构 - 部门名样式
    .c-left {
      flex: 1 1 80%;
      // background-color: lightgoldenrodyellow;
    }
    .c-right {
      display: flex;
      flex: 1 1 20%;
      // background-color: lightblue;
      .cr-left {
        flex: 1 1 50%;
        // background-color: skyblue;
      }
      .cr-right {
        flex: 1 1 50%;
        // background-color: pink;
      }
    }
  }
}
</style>
